import React, { useState } from 'react'
import { Input, Button } from 'antd';
import { STATUS } from './../../config/status'
const ToDoItem = (props) => {
  // 取出从父组件转入的submit方法
  const { onSubmit } = props
  const [todoItem, setTodoItem] = useState({

  })
  // 提交事件
  const handleSubmit = (event) => {
    if (event.target.value.replace(/\s/g, "")) {//去除空格
      onSubmit && onSubmit(todoItem)//创建提交事件时传递方法到父组件onSubmit中并传入参数

    }
  }
  // 改变输入框的值
  const handleChange = (event) => {
    setTodoItem({
      id: Math.random(),
      status: STATUS.IS_CREATE,
      content: event.target.value
    })
  }
  return (
    <div className='todo-item-input'>
      {/* onPressEnter回车事件 */}
      <Input placeholder="请输入待办事项" value={todoItem.content} onChange={handleChange} onPressEnter={handleSubmit} />
      <Button size='large' type='primary' onClick={handleSubmit}>提交</Button>
    </div>
  )
}
export default ToDoItem